<template>
  <el-dialog
    :model-value="relGoodsVisible"
    title="媒资关联商品"
    :before-close="cancelRelGoodsDialog"
    width="70%"
  >
    <el-tabs v-model="activeName" @tab-click="handleTabClick">
      <el-tab-pane label="本企业商品" name="selfCorp">
        <self-corp-goods
          ref="selfCorpGoodsRef"
        />
      </el-tab-pane>
      <el-tab-pane label="其他企业商品" name="otherCorp">
        <other-corp-goods
          ref="otherCorpGoodsRef"
        />
      </el-tab-pane>
    </el-tabs>
    <template #footer>
      <div align="center">
        <el-button type="default" @click="cancelRelGoodsDialog" size="small">取消</el-button>
        <el-button type="primary" @click="handleConfirmSelectedGoods" size="small">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
  import {defineEmits, defineProps, ref, defineAsyncComponent, nextTick, defineExpose, inject, provide} from 'vue'
  import {createMediaRelGoods} from "@/api/goods/relgoods";
  import {ElMessage} from 'element-plus'

  const SelfCorpGoods = defineAsyncComponent(() => import('./SelfCorpGoods'))
  const OtherCorpGoods = defineAsyncComponent(() => import('./OtherCorpGoods'))

  const activeName = ref('selfCorp')
  const relGoodsFormData = inject('relGoodsFormData')

  const props = defineProps({
    relGoodsVisible: {
      type: Boolean,
      default: false
    },
    relGoodsOperationType: {
      type: String,
      default: 'refgoods'
    }
  })

  const goodsInfoList = ref([])
  provide('goodsInfoList', goodsInfoList)

  const emit = defineEmits(['cancelRelGoodsDialog', 'reloadData', 'handleConfirmSelectedGoodsRes'])
  const cancelRelGoodsDialog = () => {
    emit('cancelRelGoodsDialog')
  }

  const handleConfirmSelectedGoods = () => {
    if (relGoodsFormData.datas.length <= 0) {
      ElMessage({
        type: 'warning',
        message: '请选择要添加的商品',
        duration: 2000
      })
    } else {
      if( props.relGoodsOperationType == 'refgoods' ){
        createMediaRelGoods(relGoodsFormData).then(response => {
          if (response.errcode === 0) {
            ElMessage({
              type: 'success',
              message: response.msg,
              duration: 2000,
              onClose: () => {
                cancelRelGoodsDialog()
                emit('reloadData')
              }
            })
          }
        })
      }else{
        emit('handleConfirmSelectedGoodsRes', goodsInfoList.value)
        cancelRelGoodsDialog()
      }
    }
  }
  const selfCorpGoodsRef = ref(null)
  const otherCorpGoodsRef = ref(null)
  const init = () => {
    if (activeName.value === 'selfCorp') {
      nextTick(() => {
        if (selfCorpGoodsRef.value) {
          selfCorpGoodsRef.value.getGoodsDataList()
        }
      })
    }else if( activeName.value === 'otherCorp' ){
      nextTick(() => {
        if (otherCorpGoodsRef.value) {
          otherCorpGoodsRef.value.init()
        }
      })
    }
  }
  const handleTabClick = ({props}) => {
    if (props.name === 'selfCorp') {
      selfCorpGoodsRef.value.getGoodsDataList()
    }
  }
  defineExpose({
    init
  })
</script>

<style scoped>

</style>
